<template>
  <view>
    <view class="header">
      <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
        <swiper-item v-for="(item,index) in images" :key="index">
          <image :src="item"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="content">
      <view class="grid-item" @tap="getToNavigate(it.name)" v-for="(it,index) in nav" :key="index">
        <!-- <text :class="`iconfont icon-` + it.icon" :style="'color:'+ it. iconColor"></text> -->
        <!-- 2025-11-10 `iconfont ${ it.icon }` 符号模板语句写法等同于 `iconfont icon- + it.icon` -->
        <text :class="`iconfont ${ it.icon }`" :style="'color:'+ it. iconColor"></text>
        <view>{{it.text}}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    onLoad() {
      let that = this
      // 在每一次加载的时候，请求一下接口，获取当前的导航列表
      uni.request({
        // url:'https://m1.apifoxmock.com/m1/5205229-0-default/navs',
        url:'https://apifoxmock.com/m1/5205229-0-default/navs',
        data:{},
        success(res){// 当访问接口成功的时候，可以获得响应，表示请求成功。
          if(res.data.code == 1){
            that.reqData=res.data.data;
            for(const i in that.reqData){
              that.reqData[i].iconColor=that.randomColor();
            }
            that.nav = that.reqData;
          }else{
            // alert("请求失败");
            alert(res.data.message);
          }
        },
        fail(){
          alert("请求失败")
        }
      })
    }
  }
</script>

<style>
	.header{
		background-color: pink;
		height:200PX;
		display:flex;
		justify-content:center;
		align-items:center;
	}
	.content{
		background-color: greenyellow;
		height: 420px;
	}
	.avatar{
		display: block;
		width: 150rpx;
		height: 150rpx;
		border-radous: 50%;
		box-shadow: 0 0 2px 4px rgba(255, 255,255,.7);
	}
</style>
